$(function() {
	var img = $('#image');
	var bigFile=$('#file');
	var bigimg = localStorage.getItem('bigimg');
	//当用户选择完文件之后读取文件二进制结果
	bigFile.on('change',function(e){
	    //1 创建文件读取对象
	    var reader=new FileReader();
	    //用户选择的文件列表
	    console.log(e.target.files[0]);
	    //2.读取文件 这个方法是异步方法不能通过return拿到结果
	    reader.readAsDataURL(e.target.files[0]);
	    //通过监听事件拿到结果  当文件读取完成后
	    reader.onload=function(){
	        //把读取的二进制文件编码放到img的src当中就能显示出来
			localStorage.setItem('bigimg',reader.result);
	    }
	})
	//如果存在就显示否则就使用默认
	if(bigimg){
		img.attr('src',bigimg);
	}
	
	//配置项
	const options = {
		// 纵横比
		aspectRatio: 1,
		// 指定预览区域
		preview: '.img-preview'
	}
	// 1.3 创建裁剪区域
	img.cropper(options);
	//当用户点击上传是传递到隐藏文件域中
	$('#btnChooseImage').on('click', function(e) {
		$('#img-file').click();
	});
	//当用户选择文件确认后
	$('#img-file').on('change', function(e) {
		var file = e.target.files[0]
		//转换为src地址
		var newImgURL = URL.createObjectURL(file);
		img
			.cropper('destroy') // 销毁旧的裁剪区域
			.attr('src', newImgURL) // 重新设置图片路径
			.cropper(options) // 重新初始化裁剪区域
	})
	//获取token
	var token = localStorage.getItem('token');
	//当用户点击确认时调用接口
	$('#btnCreateAvatar').on('click', function(e) {
		//图片存储到本地
		var dataURL = img.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
			width: 100,
			height: 100
		}).toDataURL('image/png'); //将 Canvas 画布上的内容，转化为 base64 格式的字符串
		$.ajax({
			method: 'POST',
			url: 'http://api-breakingnews-web.itheima.net/my/update/avatar',
			headers: {
				Authorization: token
			},
			data: {
				avatar: dataURL
			},
			success: function(res) {
				if (status == 0) {
					alert(res.message);
					//更换头像
					$('#iconImg', parent.document).attr('src', dataURL);
				} else {
					alert(res.message)
				}
			}
		})
	});
})
